<!DOCTYPE html>
<html>
	
	<head>
		<title>xViewer</title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

        <script src="Libs/gl-matrix.js"></script>
        <script src="Libs/webgl-utils.js"></script>
		<script type="text/javascript" src="Viewer/xbim-product-type.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-state.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-shaders.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-model-geometry.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-model-handle.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-binary-reader.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-triangulated-shape.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-viewer.debug.js"></script>
  
        <script src="Plugins/NavigationCube/xbim-navigation-cube-shaders.debug.js"></script>
	    <script src="Plugins/NavigationCube/xbim-navigation-cube.debug.js"></script>
	    <script src="Plugins/NavigationCube/xbim-navigation-cube-textures.debug.js"></script>

        <script src="Plugins/NavigationHome/xbim-navigation-home-textures.debug.js"></script>
        <script src="Plugins/NavigationHome/xbim-navigation-home.debug.js"></script>
        <style>
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
            }

            canvas {
                display: block;
                border: none;
                margin-left: auto;
                margin-right: auto;
            }
        </style>

	</head>
	
	
	<body>
		
		<div style="float:left; margin:20px;">
			<div>
				Selected ID: <span id = "coords" ></span>
			</div>
			<div>
				Framerate (FPS): <span id="fps"></span> 
			</div>
			<div>
				Support for floating point texture: <span id="fpt"></span> 
			</div>
			
            <a href="tests/tests.html" target="_blank">Tests</a>
            <br />
			<a href="Docs/index.html" target="_blank">Documentation</a>
		    <div style="margin-top: 50px;">
		        Models:
		        <ul>
		            <li><a href="?model=OneWall"> One Wall </a></li>
		            <li><a href="?model=OneWallTwoWindows"> One Wall Two Windows </a></li>
		            <li><a href="?model=TwoProxy"> Two proxy objects </a></li>
		            <li><a href="?model=TwoWallsTwoColour"> Two Walls Two Colour </a></li>
		            <li><a href="?model=FourWalls"> Four Walls </a></li>
		            <li><a href="?model=FourWallsDoorWindows"> Four Walls Door Windows </a></li>
		            <li><a href="?model=FourWallsDoorWindowsRoof"> Four Walls Door Windows Roof </a></li>
		            <li><a href="?model=LakesideRestaurant"> Lakeside Restaurant </a></li>
		        </ul>
		    </div>
		    <div id="errLog" style="color: red">
		        
		    </div>
		</div>
		<div style="float:right; margin:20px;">
			<div>
                <button onclick="viewer.navigationMode = 'orbit'">Orbit</button>
				<button onclick="viewer.navigationMode = 'free-orbit'">Free orbit</button>
				<button onclick="viewer.navigationMode = 'pan'">Pan</button>
				<button onclick="viewer.navigationMode = 'zoom'">Zoom</button>
			</div>
			<div>
				<button onclick="viewer.show('front')">Front</button>
				<button onclick="viewer.show('back')">Back</button>
				<button onclick="viewer.show('top')">Top</button>
				<button onclick="viewer.show('bottom')">Bottom</button>
				<button onclick="viewer.show('left')">Left</button>
				<button onclick="viewer.show('right')">Right</button>
			</div>
		
			<div>
				<button onclick="viewer.clip();"> Clip model
				</button>
				<button onclick="viewer.unclip();"> Reset clipping
				</button>
			</div>
			<div>
				<button onclick="viewer.camera = 'perspective';"> Perspective
				</button>
				<button onclick="viewer.camera = 'orthogonal';"> Orthographic
				</button>
			</div>
			<div>
				<button onclick="makeWallsRed()"> Make all walls red
				</button>
				<button onclick="hideWalls()"> Hide all walls
				</button>
				<button onclick="resetWalls()"> Reset walls
				</button>
                <button onclick="selectAllWalls()">
                    Select
                </button>
			</div>
			<div>
				<button onclick="viewer.setState(states.HIDDEN, types.IFCSPACE)"> Hide spaces
				</button>
				<button onclick="viewer.setState(states.UNDEFINED, types.IFCSPACE)"> Show spaces
				</button>
			</div>
			<div>
				<form>
					<label> 
						<input type="radio" name="radioHiding" value="hideOne"/> Hide on click
					</label>
					<label> 
						<input type="radio" name="radioHiding" value="hideType"/> Hide by type
					</label>
					<label> 
						<input type="radio" name="radioHiding" value="noHide"/> No hiding
					</label>
				</form>
				<button onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setState(states.UNDEFINED, types[i])}}"> Show all
				</button>
				<button onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(1, types[i])}}"> Make all glass
				</button>
				<button onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(2, types[i])}}"> Make all white
				</button>
                <button onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(xState.UNSTYLED, types[i])}}">
                    Make all default
                </button>
			</div>
            <div>
                Rendering mode:
                <br />
                <label>
                    <input type="radio" name="radioRenderingMode" value="normal" checked="checked" onchange="viewer.renderingMode = 'normal';"/> Normal
                </label>
                <label>
                    <input type="radio" name="radioRenderingMode" value="xray" onchange="viewer.renderingMode = 'x-ray';" /> X-Ray
                </label>
            </div>
		</div>
		<canvas id="xBIM-viewer" width="600" height="500"></canvas>
		<script type="text/javascript">
			var QueryString = function () {
				// This function is anonymous, is executed immediately and 
				// the return value is assigned to QueryString!
				var queryString = {};
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i=0;i<vars.length;i++) {
					var pair = vars[i].split("=");
					// If first entry with this name
					if (typeof queryString[pair[0]] === "undefined") {
						queryString[pair[0]] = pair[1];
						// If second entry with this name
						} else if (typeof queryString[pair[0]] === "string") {
						var arr = [ queryString[pair[0]], pair[1] ];
						queryString[pair[0]] = arr;
						// If third or later entry with this name
						} else {
						queryString[pair[0]].push(pair[1]);
					}
				} 
				return queryString;
			} ();
			
			
			var viewer = new xViewer("xBIM-viewer");
			viewer.background = [0, 0, 0];
			viewer.on("error", function (arg) {
			    var container = viewer._canvas.parentNode;
			    if (container) {
			        //preppend error report
			        container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;
			    }
			});
			var model = "";
			if (typeof (QueryString.model) == "undefined") model = "tests/data/SampleHouse.wexbim";
			else model = "tests/data/" + QueryString.model + ".wexbim";
			viewer.show("back");
			viewer.on("pick", function(arg){
				var span = document.getElementById("coords");
				if (span){
					span.innerHTML = arg.id;
				}
			});
			viewer.on("mouseDown", function (arg)
			{
			    viewer.setCameraTarget(arg.id);
			});
			viewer.on("fps", function(fps){
				var span = document.getElementById("fps");
				if (span){
					span.innerHTML = fps;
				}
			});
			var span = document.getElementById("fpt");
			if (span){
				span.innerHTML = viewer._fpt != null;
			}
			viewer.load(model);
			viewer.start();
			
			var types = xProductType;
			var states = xState;
			viewer.defineStyle(0, [255,0,0,255]);  //red
			viewer.defineStyle(1, [0,0,255,100]);  //semitransparent blue
			viewer.defineStyle(2, [255,255,255,255]); //white
			var makeWallsRed = function(){
				viewer.setStyle(0, types.IFCWALLSTANDARDCASE );
				viewer.setStyle(0, types.IFCCURTAINWALL );
				viewer.setStyle(0, types.IFCWALL );
			}
			var selectAllWalls = function () {
			    viewer.setState(states.HIGHLIGHTED, types.IFCWALLSTANDARDCASE);
			    viewer.setState(states.HIGHLIGHTED, types.IFCCURTAINWALL);
			    viewer.setState(states.HIGHLIGHTED, types.IFCWALL);
			}
			var hideWalls = function(){
				viewer.setState(states.HIDDEN, types.IFCWALLSTANDARDCASE );
				viewer.setState(states.HIDDEN, types.IFCCURTAINWALL );
				viewer.setState(states.HIDDEN, types.IFCWALL );
			}
			var resetWalls = function(){
				viewer.setState(states.UNDEFINED, types.IFCWALLSTANDARDCASE );
				viewer.setState(states.UNDEFINED, types.IFCCURTAINWALL );
				viewer.setState(states.UNDEFINED, types.IFCWALL );
			}
			viewer.on("pick", function (args) {
			    var id = args.id;
				var radios = document.getElementsByName("radioHiding");
				for(var i in radios) {
			        if (radios.hasOwnProperty(i)) {
			            var radio = radios[i];
			            if (radio.checked) {
			                var val = radio.value;
			                if (val === "noHiding") return;
			                if (val === "hideOne") viewer.setState(states.HIDDEN, [id]);
			                if (val === "hideType") {
			                    var type = viewer.getProductType(id);
			                    viewer.setState(states.HIDDEN, type);
			                }
			                break;
			            }
			        }
			    }

			    //viewer.zoomTo(id);
			});

			var cube = new xNavigationCube();
			viewer.addPlugin(cube);

			var home = new xNavigationHome();
			viewer.addPlugin(home);

		</script>
	</body>
	
</html>
